Vue.component('iframe-dialog',{
  props : {
    action :{required:true},
    // title :{required:true},
    row:{required:true},
    index:{required:true},
    params:{required:false},
    getParams:{required:false},
    showHtml:''
  },
  data : function() {
    return {
      dialogVisibleIframe:false,
      titleText:'查看明细',
      actionUrl:this.action,
      paramsData:{}
    };
  },
  template: `
    <div>
      <a href="javascript:;" style="color:#409EFF;" @click="dialogVisibleIframe = true" v-html="paramsData.showHtml"></a>
      <el-dialog
        :title="titleText"
        :fullscreen="false"
        :visible.sync="dialogVisibleIframe"
        :width="paramsData.width"
        >
        <div style="width:100%;height:450px;">
          <iframe width='100%' height='100%' :src="actionUrl" frameborder="0"></iframe>
        </div>
      </el-dialog>
    </div>
  `,
  mounted : function() {
    // console.log(this.params);
    this.paramsData.showHtml = this.row[this.params.showFiled];
    this.paramsData.width = this.params.width || "90%";
    //处理弹框的url
    for(var k in this.getParams){
      var p = this.getParams[k];
      this.actionUrl += "&"+p+"="+this.row[p];
    }
  }
});

//自定义的操作按钮
Vue.component('progress-iframe-dialog',{
  props : {
    action :{required:true},
    // title :{required:true},
    row:{required:true},
    index:{required:true},
    params:{required:false},
    getParams:{required:false},
  },
  data : function() {
    //处理每行不同的title
    var titleTmp = '点击查看明细';
    if(this.params && this.params.titleKey){
      titleTmp = this.row[this.params.titleKey];
    }

    return {
      dialogprogressVisibleIframe:false,
      titleText:titleTmp,
      actionUrl:this.action,
      paramsData:{}
    }
  },
  template: `
    <div>
      <a href="javascript:;" style="color:#409EFF;" @click="dialogprogressVisibleIframe = true" :title='titleText'>
        <el-progress class="el-progress-bg-gray" :text-inside="true" :stroke-width="18" :percentage="paramsData.percentage"></el-progress>
      </a>
      <el-dialog
        title="查看明细"
        :fullscreen="false"
        :visible.sync="dialogprogressVisibleIframe"
        :width="paramsData.width"
        >
        <div style="width:100%;height:450px;">
          <iframe width='100%' height='100%' :src="actionUrl" frameborder="0"></iframe>
        </div>
      </el-dialog>
    </div>
  `,
  mounted : function() {
    this.paramsData.percentage = this.row[this.params.percentage];
    this.paramsData.width = this.params.width || "90%";

    //处理弹框的url
    for(var k in this.getParams){
      var p = this.getParams[k];
      this.actionUrl += "&"+p+"="+this.row[p];
    }
  }
});